<template>
  <FPage v-loading="loading">
    <template #header>
      <CommonCountListWrapper>
        <CommonCountComponent @click="toUnit" :count="unitCount.unitCount" desc="单位"/>
        <CommonCountComponent @click="openPositionManagerModal" :count="unitCount.positionCount" desc="基准岗"/>
        <CommonCountComponent @click="openPositionLevelManagerModal" :count="unitCount.positionLevelCount" desc="集团职务级别"/>
        <CommonCountComponent desc="集团人员"/>
        <CommonCountComponent @click="openRoleManagerModal" :count="unitCount.roleCount" count="1" desc="集团角色"/>
        <CommonCountComponent desc="兼职信息"/>
        <CommonCountComponent desc="系统组"/>
      </CommonCountListWrapper>
    </template>

    <div class="group-desc">
      <div class="group-desc-left">
        <el-text style="margin-left: 10px; margin-top: 10px" tag="b" truncated>
          集团基本信息
        </el-text>
        <el-form ref="refLeftForm" label-width="120px" :model="groupData">
          <el-form-item prop="unitName" label="集团名称" :rules="[required]">
            <el-input placeholder="请输入集团名称" v-model="groupData.unitName"/>
          </el-form-item>

          <el-form-item prop="simpleName" label="集团简称" :rules="[required]">
            <el-input placeholder="请输入集团简称" v-model="groupData.simpleName"/>
          </el-form-item>

          <el-form-item prop="unitCode" label="集团编码" :rules="[required]">
            <el-input placeholder="请输入集团编码" v-model="groupData.unitCode"/>
          </el-form-item>

          <el-form-item prop="unitDesc" label="集团描述" :rules="[]">
            <el-input type="textarea" placeholder="请输入集团描述" v-model="groupData.unitDesc"/>
          </el-form-item>
        </el-form>
      </div>

      <div class="group-desc-body">
        <el-text style="margin-left: 10px; margin-top: 10px" tag="b" truncated>
          集团说明信息
        </el-text>

        <el-form ref="refRightForm" label-width="120px" :model="groupData">
          <el-form-item prop="unitType" label="单位类型">
            <SystemDict dict-code="unitType" placeholder="请选择单位类型"
                        v-model="groupData.unitType"/>
          </el-form-item>

          <el-form-item prop="unitLegalPerson" label="负责人(法人)" :rules="[]">
            <el-input placeholder="请输入负责人(法人)" v-model="groupData.unitLegalPerson"/>
          </el-form-item>

          <el-form-item prop="pos" label="地址" :rules="[]">
            <el-input placeholder="请输入地址" v-model="groupData.pos"/>
          </el-form-item>

          <el-form-item prop="postal" label="邮编" :rules="[]">
            <el-input placeholder="请输入邮编" v-model="groupData.postal"/>
          </el-form-item>

          <el-form-item prop="tel" label="电话" :rules="[]">
            <el-input placeholder="请输入电话" v-model="groupData.tel"/>
          </el-form-item>

          <el-form-item prop="fax" label="传真" :rules="[]">
            <el-input placeholder="请输入传真" v-model="groupData.fax"/>
          </el-form-item>

          <el-form-item prop="website" label="网址" :rules="[]">
            <el-input placeholder="请输入网址" v-model="groupData.website"/>
          </el-form-item>

          <el-form-item prop="email" label="邮编地址" :rules="[]">
            <el-input placeholder="请输入邮编地址" v-model="groupData.email"/>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="group-desc-footer">
        <el-button round icon="cancel" @click="cancel">取消</el-button>
        <el-button round icon="ok" type="primary" @click="ok">确定</el-button>
      </div>
    </template>
  </FPage>
  <PositionManagerModal ref="refPositionManagerModal"/>
  <PositionLevelManagerModal ref="refPositionLevelManagerModal"/>
  <RoleManagerModal ref="refRoleManagerModal"/>
</template>
<script setup>
import {onMounted, ref, shallowRef, toRaw, unref} from 'vue';
import CommonCountListWrapper from '@/views/system/UnitManagement/CommonCountListWrapper';
import CommonCountComponent from '@/views/system/UnitManagement/CommonCountComponent';
import FPage from '@/components/layout/FPage.vue';
import {real, required} from '@/utils/CommonUtils';
import SystemDict from '@/components/SystemDict';
import {getAction, postAction} from '@/request/BaseRequest';
import {ElMessage} from 'element-plus';
import PositionManagerModal from '@/views/system/UnitManagement/PositionManagerModal/index.vue';
import PositionLevelManagerModal from '@/views/system/UnitManagement/PositionLevelManagerModal/index.vue';
import RoleManagerModal from '@/views/system/UnitManagement/RoleManagerModal/index.vue';

const emits = defineEmits(['selectChange', 'reloadUnits', 'clearSelect']);
defineOptions({
  name: 'GroupEditModal'
});
const groupData = ref({
  unitName: undefined,
  simpleName: undefined,
  unitCode: undefined,
  unitDesc: undefined,
  unitType: undefined,
});

const props = defineProps({
  group: {},
});
const refFModal = shallowRef();
const refPositionManagerModal = shallowRef();
const refPositionLevelManagerModal = shallowRef();
const refRoleManagerModal = shallowRef();
const refLeftForm = shallowRef();
const refRightForm = shallowRef();
const loading = shallowRef(false);
const unitCount = shallowRef({
  unitCount: undefined,
  positionCount: undefined,
  positionLevelCount: undefined,
  roleCount: undefined,
  groupCount: undefined,
  userCount: undefined,
});

onMounted(() => {
  loadGroupData();
});

function openPositionManagerModal() {
  refPositionManagerModal.value.setData(groupData);
}

function openPositionLevelManagerModal() {
  refPositionLevelManagerModal.value.setData(groupData);
}

function openRoleManagerModal() {
  refRoleManagerModal.value.setData(groupData);
}

function loadGroupData() {
  loading.value = true;
  getAction('/sys/unit/loadUnitById',
    {id: props.group.id}).then(data => {
    loading.value = false;
    if (data.success) {
      groupData.value = data.result;
      loadUnitCounts();
    }
  });
}

function setData({id}) {
  loadGroupUnit();
  refFModal.value.open();
}

function loadUnitCounts() {
  loading.value = true;
  getAction('/sys/unit/loadGroupCountById',
    {id: props.group.id}).then(data => {
    loading.value = false;
    if (data.success) {
      unitCount.value = data.result;
    }
  });
}


function toUnit() {
  emits('selectChange', {id: 'rootNode'});
}

function loadGroupUnit() {

}

function cancel() {
  emits('clearSelect');
}

function ok() {
  refLeftForm.value.validate((valid, errors) => {
    if (valid) {
      refRightForm.value.validate((valid, errors) => {
        if (valid) {
          save(unref(groupData));
        }
      });
    }
  });
}

function save(group) {
  group = unref(group);
  group = toRaw(group);
  loading.value = true;
  postAction('/sys/unit/saveUnit', group).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      ElMessage({
        message: '保存成功',
        type: 'success',
      });
      loadGroupData();
      emits('reloadUnits');
    }
  });
}

defineExpose({
  setData
});
</script>
<style>
.group-desc {
  display: flex;
  border: 2px solid #f0f2f5;
  background: white;
  box-sizing: border-box;
  min-height: 100%;
}

.group-desc-left {
  flex: 0.5;
  padding-right: 30px;
}

.group-desc-footer {
  text-align: right;
  padding: 5px 10px;
}

.group-desc-body {
  flex: 0.5;
  padding-right: 30px;
}
</style>
